<template>
  <div class="editorBack">
    <p class="ediTitle">
        编写博文
    </p>
    <div>
      <el-button class="backButton" type="text" icon="el-icon-back" style="float: left">返回</el-button>
      <el-button class="submitButton" type="success" style="float: right" v-on:click="upload">发布文章</el-button>
    </div>
    <el-input class="deiInput1" placeholder="请输入博客标题" v-model="title" clearable ></el-input>
    <el-input class="deiInput2" placeholder="请输入标签（最多3个）" v-model="keys" clearable ></el-input>
    <el-input class="deiInput3" placeholder="请输入摘要" v-model="summary" clearable ></el-input>
    <markdown-pro class="mdEditor" v-model="textarea"></markdown-pro>
  </div>
</template>

<script>
import { MarkdownPro } from 'vue-meditor';
import axios from "axios";

export default {
  name: "Editor",
  components: {
    MarkdownPro
  },
  data() {
    return {
      textarea: '',
      title: '',
      keys: '',
      summary: '',
    }
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    async upload() {
      let mauthor = this.$store.state.uid;
      let mtitle = this.title;
      let keys = this.keys;
      let msummary = this.summary;
      let marticle = this.textarea;
      let key1 = '', key2 = '', key3 = '', flag = 1;
      for (let i = 0; i < keys.length ; i++) {
        if(keys.charAt(i) !== ' ') {
          switch (flag) {
            case 1:
              key1 = key1 + keys.charAt(i);
              break;
            case 2:
              key2 = key2 + keys.charAt(i);
              break;
            case 3:
              key3 = key3 + keys.charAt(i);
              break;
            default:
              break;
          }
        }
        else {
          flag++;
          if(flag > 3){
            break;
          }
        }
      }
      console.log(mauthor);
      console.log(mtitle);
      console.log(key1);
      console.log(key2);
      console.log(key3);
      console.log(msummary);
      console.log(marticle);
      //let {data} = await axios.post('http://localhost:8080/selectBlog',
      //    {blog_id:'1'})

      let {data} = await axios.post('http://localhost:8080/publishBlog',
          {author:mauthor, title:mtitle, type1:key1, type2:key2, type3:key3, summary:msummary, article:marticle});
      console.log(data);
      switch (data.errno){
        case '6001':
          alert('未输入文章标题');
          return
        case '6002':
          alert('未输入文章内容');
          return
        case 1:
          alert('博文发布成功！即将返回个人主页');
          await this.$router.push('/');
          return;
        default:
          alert('其他错误，博文发布失败');
          return;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.editorBack{
  background: wheat;
  height:850px;
  width:1200px;
  margin:auto;
  border-radius: 10px;
  .ediTitle{
    font-family: "Times New Roman", cursive, serif, sans-serif;
    width: 500px;
    height: 50px;
    //border: 1px solid rgb(90, 189, 251, 0.295);
    margin:auto;
    font-size: 45px;
    color:rgba(0, 0, 0, 0.745);
    font-weight: bold;
  }
  .submitButton{
    position: absolute;
    top: 130px;
    left: 990px;
  }
  .backButton{
    position: absolute;
    top: 140px;
    left: 200px;
  }
  .deiInput1{
    position: absolute;
    top: 200px;
    left: 200px;
    width: 440px;
    text-align: center;
  }
  .deiInput2{
    position: absolute;
    top: 200px;
    left: 660px;
    width: 440px;
    text-align: center;
  }
  .deiInput3{
    position: absolute;
    top: 260px;
    left: 200px;
    width: 900px;
    text-align: center;
  }
  .mdEditor{
    position: absolute;
    top: 320px;
    left:200px;
    width: 900px;
    height: 200px;
  }
}
</style>